<template>
	<view class="warp">
		<!-- 顶部 start -->
		<view class="top_box" :style="box_bj.backgroundImage  ? box_bj : 'background-color:#abc7ed;'">
			<view class="face">
				<image :src="row.image" mode="aspectFit"></image>
			</view>
			<view class="username" v-cloak>
				{{row.name}}
			</view>
		</view>
		<!-- 顶部 end -->
		<!-- 切换 start -->
		<view class="navi_box">
			<view class="navi_i" @click="naviClick(0)" :class="navi_active==0?'navi_i_active':''">
				全部课程
			</view>
			<view class="navi_i" @click="naviClick(1)" :class="navi_active==1?'navi_i_active':''">
				讲师介绍
			</view>
		</view>
		<!-- 切换 end -->
		<!-- 课程与介绍 start -->
		<view class="navi_select">
			<view class="navi_1" v-show="navi_active == 0">
				<view class="course_list">
					<view class="course_item" v-for="(v,k) in course_list" :key="k"
						@click="jumpUrl('/pages/course/details?id=' + v.id)">
						<view class="course_img_box">
							<image :src="v.image" mode="aspectFill"></image>
							<view class="course_click">
								<uv-icon name="play-circle" color="#fff" size="18"></uv-icon>
								<text>{{v.click}}</text>人已学习
							</view>
						</view>
						<view class="course_text line_2">
							{{v.name}}
						</view>
					</view>
				</view>
			</view>
			<view class="navi_2" v-show="navi_active == 1">
				<uv-parse :content="row.content"></uv-parse>
			</view>
		</view>
		<!-- 课程与介绍 end -->
		<!-- 底部tabbar start -->
		<bastTabbar :tabbar_index="100"></bastTabbar>
		<!-- 底部tabbar end -->
	</view>
</template>

<script>
	import bastTabbar from '@/component/base-tabbar.vue'
	export default {
		components: {
			bastTabbar,
		},
		data() {
			return {
				box_bj: {},
				navi_active: 0,
				row:{name:""},
				course_list:[],
			}
		},
		onLoad(options) {
			// #ifdef WEB
			this.box_bj = {
					backgroundColor: '#abc7ed',
					backgroundImage: "url('" + this.$IMG_URL + "teacher-bj.jpg')",
					backgroundSize: 'cover',
					backgroundRepeat: 'no-repeat'
			}
			// #endif
			this.row.id = options.id
			this.get_author()
			this.course_search()
		},
		methods: {
			naviClick(index) {
				this.navi_active = index
			},
			async get_author() {
				const res = await this.$myRequest({
					url: "author/details",
					type: "post",
					data: {id:this.row.id}
				});
				if(res.code){
					this.row = res.data
				}
			},
			async course_search() {
				const res = await this.$myRequest({
					url: "course/search",
					type: "post",
					data: {author_id:this.row.id}
				});
				if(res.code){
					this.course_list = res.data
				}
			},
		}
	}
</script>

<style lang="scss">
	.warp {
		background-color: #FFF;
		min-height: 100vh;
		max-width: 1600rpx;
		margin: auto;

		// 顶部
		.top_box {
			display: flex;
			align-items: center;
			padding: 90rpx 20rpx;

			.face {
				image {
					width: 140rpx;
					height: 140rpx;
					border-radius: 50%;
				}
			}

			.username {
				margin-left: 30rpx;
				font-weight: bold;
				font-size: 32rpx;
				background-color: rgba(0, 0, 0, 0.4);
				color: #fff;
				padding: 6rpx 20rpx;
				border-radius: 10rpx;
			}
		}

		// 切换
		.navi_box {
			display: flex;
			align-items: center;
			justify-content: space-around;
			border-top: 1px solid #e6e6e6;
			background-color: #f4f4f4;

			.navi_i {
				height: 80rpx;
				line-height: 80rpx;
				text-align: center;
				color: #666;
				border-bottom: 1px solid #e6e6e6;
				flex: 1;
			}

			.navi_i_active {
				color: #f8845f;
				border-bottom: 4rpx #f8845f solid;
				font-weight: bold;
			}
		}

		// 课程与介绍
		.navi_select {
			padding: 20rpx;

			.navi_1 {
				.course_list {
					margin-top: 40rpx;
					padding-bottom: 40rpx;
					display: grid;
					grid-template-columns: repeat(auto-fill, minmax(calc(50% - 30rpx), 1fr));
					grid-gap: 30rpx;

					.course_item {
						.course_img_box {
							position: relative;

							.course_click {
								display: flex;
								align-items: center;
								position: absolute;
								right: 0;
								bottom: 0;
								background-color: rgba(0, 0, 0, 0.6);
								border-radius: 10rpx;
								padding: 4rpx 10rpx;
								font-size: 24rpx;
								color: #FFF;

								text {
									margin-left: 8rpx;
								}
							}

							image {
								border-radius: 6rpx 6rpx 0 0;
								width: 100%;
								// height: 200rpx;
								height: 25vw;
								max-height: 400rpx;
							}
						}

						.course_text {
							font-size: 26rpx;
							color: #333;
						}
					}
				}

			}
		}
	}
</style>